import React, {Component} from 'react';
import {
	AppRegistry,
	Platform,
	StyleSheet,
	Image,
	Text,
	View,
	TextInput,
	PixelRatio,
	TouchableOpacity
} from 'react-native';
import HTMLView from 'react-native-htmlview';

var Common = require('./common');
const pixelRatio = PixelRatio.get();
const dismissKeyboard = require('dismissKeyboard');
export default class NewsDetail extends Component<Props> {
	constructor(props) {
		super(props);
		this.state = {
			str: '推荐',
			news: {},
			imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514356844477&di=7c57fde0860194258cbec5c2720e0cf5&imgtype=0&src=http%3A%2F%2Fwww.swkweike.com%2Fdata%2Fuploads%2F2015%2F05%2F26%2F20430804665564348adc669.png',
			aid: this.props.navigation.state.params,
		};
	}

	static navigationOptions = {
		headerTitle: '详情',
		tabBarLabel: '详情',
		tabBarIcon: ({focused}) => {
			if (focused) {
				return (
					<Image style={{height: 30, width: 30}}
					       source={require('./images/zixun1.png')}/>
				);
			}
			return (
				<Image style={{height: 30, width: 30}}
				       source={require('./images/zixun.png')}/>
			);
		},
	};

	login() {
		var _this = this;
		Common.ajaxPost(Common.url + 'login.php', function (res) {
			if (res.code == "0000") {

			}
		}.bind(this), {verify: '08login', t: ''});
	}

	toRegister() {
		this.props.navigation.navigate('Register')
	}

	toHome() {

		this.props.navigation.navigate('Home')
	}

	toHudong() {

		this.props.navigation.navigate('Hudong')
	}

	toMine() {

		this.props.navigation.navigate('Mine')
	}

	toHomeBack() {

		this.props.navigation.goBack()
	}

	getData() {
		var _this = this;

		Common.ajaxGet(Common.url + 'article.php?action=detail&id=' + this.state.aid, function (res) {
			console.log(res)
			if (res.code == 1) {
				var data = res.data;
				this.setState({
					news: data,
				})
			}
		}.bind(this), {verify: '08login', t: ''});
	}

	componentWillMount() {
		console.log(this.state.aid);
		this.getData();
		// console.log(this.props.navigation.state.params)
		// if(this.props.navigation.state.params.from){
		//   this.setState({
		//     from:this.props.navigation.state.params,
		//   })
		// }
	}

	render() {
		const {navigate} = this.props.navigation;
		return (
			<View style={styles.container}>
				<View style={styles.head}>
					<TouchableOpacity style={styles.toback} onPress={this.toHomeBack.bind(this)}>
						<Text style={{fontSize: 16,}}>返回</Text>
					</TouchableOpacity>
					<Text style={styles.headTitle}>资讯</Text>
				</View>
				<View style={styles.title}>
					<Text style={styles.titleText}>{this.state.news.subject}</Text>
					<View style={{flexDirection: 'row'}}>
						<Text style={styles.newsTipsMark}>{this.state.news.categoryname}</Text>
					</View>
				</View>
				<HTMLView style={styles.newsContent} value={this.state.news.content} />
				<View style={{height: 51}}></View>
				<View style={styles.bnav}>
					<TouchableOpacity activeOpacity={1} style={styles.bnavItem} onPress={this.toHome.bind(this)}>
						<Image style={[styles.bnavImg, {width: 25, height: 20}]}
						       source={require('./images/cheyuan.png')}/>
						<Text style={styles.bnavText}>车源</Text>
					</TouchableOpacity>
					<TouchableOpacity activeOpacity={1} style={styles.bnavItem} onPress={this.toHomeBack.bind(this)}>
						<Image style={[styles.bnavImg, {width: 22, height: 22}]}
						       source={require('./images/zixun1.png')}/>
						<Text style={styles.bnavText}>资讯</Text>
					</TouchableOpacity>
					<TouchableOpacity activeOpacity={1} style={styles.bnavItem} onPress={this.toHudong.bind(this)}>
						<Image style={[styles.bnavImg, {width: 22, height: 22}]}
						       source={require('./images/hudong1.png')}/>
						<Text style={styles.bnavText}>互动</Text>
					</TouchableOpacity>
					<TouchableOpacity activeOpacity={1} style={styles.bnavItem} onPress={this.toMine.bind(this)}>
						<Image style={[styles.bnavImg, {width: 22, height: 22}]} source={require('./images/wode.png')}/>
						<Text style={styles.bnavText}>我的</Text>
					</TouchableOpacity>
				</View>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		height: Common.screenHeight,
		backgroundColor: '#fff',
	},
	head: {
		height: 50,
		width: Common.screenWidth,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		backgroundColor: '#fff',

	},
	headTitle: {
		fontSize: 16,
	},
	toback: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		height: 50,
		position: 'absolute',
		left: 20,
		top: 0,
		fontSize: 14,
	},
	title: {
		paddingBottom: 22,
		paddingTop: 26,
		marginLeft: 20,
		marginRight: 20,
		borderTopColor: '#e9e9e9',
		borderTopWidth: 1,
	},
	titleText: {
		fontSize: 18,
		lineHeight: 22,
		marginBottom: 10,
	},
	newsTipsMark: {
		marginRight: 10,
		backgroundColor: '#f5f7fa',
		padding: 3,
		color: '#a8a8a8',

	},
	newsContent: {
		paddingLeft: 20,
		paddingRight: 20,
	},
	bnav: {
		width: Common.screenWidth,
		height: 50,
		position: 'absolute',
		left: 0,
		bottom: 0,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		backgroundColor: '#f4f5f8',
		borderTopColor: '#afafaf',
		borderTopWidth: 1,
	},
	bnavItem: {
		flex: 1,
		flexDirection: 'column',
		alignItems: 'center',
		justifyContent: 'center'
	},
	bnavText: {
		textAlign: 'center',
		paddingTop: 5,
	},
	bnavImg: {
		margin: 'auto'
	}
});
